<template>
  <div :class="notifcation" :style="wrapStyle">
    <!-- <transition-group name="ifast-maskIn"> -->
      <Notice
        v-for="(notice,index) in notices"
        :key="notice.name"
        :type="notice.type"
        :name="notice.name"
        :title="notice.title"
        :content="notice.content"
      ></Notice>  
    <!-- </transition-group> -->
  </div>
</template>

<script>
let prefixCls='ifast'
import Notice from '../notice/notice'
import {DataNow} from '../../utils/index.js'
export default {
  name: 'Notification',
  components:{Notice},
  computed:{
    notifcation(){
      return[
        `${prefixCls}-notifcation-box`,
      ]
    },
    wrapStyle(){
      let obj={};
      obj['z-index']=1000+this.tIndex;
      return obj;
    }
  },
  data () {
    return {
      notices:[],
      tIndex:0
    }
  },

  methods: {
    add(opction){
      let _notice = Object.assign({
          styles: {
              right: '50%'
          },
          content: '',
          duration: 1.5,
          colseFalg: false,
          name: ''
      },opction);
      this.notices.push(_notice);
      this.tIndex=this.tIndex+1
    },
    colse(name){
      const notices = this.notices;
        for (let i = 0; i < notices.length; i++) {
            if (notices[i].name === name) {
                this.notices.splice(i, 1);
                break;
            }
        }
    },
    colseAll(){
      this.notices = [];
    }
  }
}
</script>